
<!DOCTYPE html>
<html class="html" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>My4399</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

</head>
<body>
<style>
  #keyboard{
    position: relative;
  }
  .key{
    position: absolute;
    vertical-align:top;
    font-size:12px;line-height: 16px;
    min-width:32px;min-height:32px;
    padding:4px;
    border:1px solid #000;
  }
  .key.active{background-color:yellow;}
</style>
<div id="app">
  <p>The quick brown fox jumps over the lazy dog”</p>
  <p>这句话覆盖了全部26个英文字母，早年间是用来测试键盘或打字机硬件是否正常的测试用例。</p>
  <p>现在用来测试自家的泽溢左手键盘（这款左手键盘的布局大体上挺好用的，就是容易出现键位不响应）</p>
  <p>
    请注意F5和F12有开发用途<button type="button" @click="resetKeyboard()">重置键盘</button>
    同时请留意CapsLock和NumLock的状态
  </p>
  <div id="keyboard">
    <template v-for="(v,k) in keyboard">
      <div class="key" v-bind:class="{'active':v.isActive}" :key="k" :style="v.style">
        <div>{{ v.shift }}</div>
        <div>{{ v.keyName }}</div>
      </div>
    </template>
  </div>
</div>
<script type="text/javascript">
'use strict';

var vm = new Vue({
  el:'#app'
  ,data:(function(){
    return {
      oneKeySize:{
        size:52
      },
      keyboard:[
        {shift:null,keyName:'Esc',keyCode:27,top:0,left:0,},
        {shift:null,keyName:'F1',keyCode:112,top:0,left:2,},
        {shift:null,keyName:'F2',keyCode:113,top:0,left:3,},
        {shift:null,keyName:'F3',keyCode:114,top:0,left:4,},
        {shift:null,keyName:'F4',keyCode:115,top:0,left:5,},
        {shift:null,keyName:'F5',keyCode:116,top:0,left:6.5,},
        {shift:null,keyName:'F6',keyCode:117,top:0,left:7.5,},
        {shift:null,keyName:'F7',keyCode:118,top:0,left:8.5,},
        {shift:null,keyName:'F8',keyCode:119,top:0,left:9.5,},
        {shift:null,keyName:'F9',keyCode:120,top:0,left:11,},
        {shift:null,keyName:'F10',keyCode:121,top:0,left:12,},
        {shift:null,keyName:'F11',keyCode:122,top:0,left:13,},
        {shift:null,keyName:'F12',keyCode:123,top:0,left:14,},

        {shift:'~',keyName:'`',keyCode:192,top:1,left:0,},
        {shift:'!',keyName:'1',keyCode:49,top:1,left:1,},
        {shift:'@',keyName:'2',keyCode:50,top:1,left:2,},
        {shift:'#',keyName:'3',keyCode:51,top:1,left:3,},
        {shift:'$',keyName:'4',keyCode:52,top:1,left:4,},
        {shift:'%',keyName:'5',keyCode:53,top:1,left:5,},
        {shift:'^',keyName:'6',keyCode:54,top:1,left:6,},
        {shift:'&',keyName:'7',keyCode:55,top:1,left:7,},
        {shift:'*',keyName:'8',keyCode:56,top:1,left:8,},
        {shift:'(',keyName:'9',keyCode:57,top:1,left:9,},
        {shift:')',keyName:'0',keyCode:48,top:1,left:10,},
        {shift:'_',keyName:'-',keyCode:189,top:1,left:11,},
        {shift:'+',keyName:'=',keyCode:187,top:1,left:12,},
        {shift:null,keyName:'Backspace',keyCode:8,top:1,left:13,width:2},
        
        {shift:null,keyName:'Tab',keyCode:9,top:2,left:0,width:1.5},
        {shift:'Q',keyName:'q',keyCode:81,top:2,left:1.5,},
        {shift:'W',keyName:'w',keyCode:87,top:2,left:2.5,},
        {shift:'E',keyName:'e',keyCode:69,top:2,left:3.5,},
        {shift:'R',keyName:'r',keyCode:82,top:2,left:4.5,},
        {shift:'T',keyName:'t',keyCode:84,top:2,left:5.5,},
        {shift:'Y',keyName:'y',keyCode:89,top:2,left:6.5,},
        {shift:'U',keyName:'u',keyCode:85,top:2,left:7.5,},
        {shift:'I',keyName:'i',keyCode:73,top:2,left:8.5,},
        {shift:'O',keyName:'o',keyCode:79,top:2,left:9.5,},
        {shift:'P',keyName:'p',keyCode:80,top:2,left:10.5,},
        {shift:'{',keyName:'[',keyCode:219,top:2,left:11.5,},
        {shift:'}',keyName:']',keyCode:221,top:2,left:12.5,},
        {shift:'|',keyName:'\\',keyCode:220,top:2,left:13.5,width:1.5},

        {shift:null,keyName:'Caps lock',keyCode:20,top:3,left:0,width:2},
        {shift:'A',keyName:'a',keyCode:65,top:3,left:2,},
        {shift:'S',keyName:'s',keyCode:83,top:3,left:3,},
        {shift:'D',keyName:'d',keyCode:68,top:3,left:4,},
        {shift:'F',keyName:'f',keyCode:70,top:3,left:5,},
        {shift:'G',keyName:'g',keyCode:71,top:3,left:6,},
        {shift:'H',keyName:'h',keyCode:72,top:3,left:7,},
        {shift:'J',keyName:'j',keyCode:74,top:3,left:8,},
        {shift:'K',keyName:'k',keyCode:75,top:3,left:9,},
        {shift:'L',keyName:'l',keyCode:76,top:3,left:10,},
        {shift:':',keyName:';',keyCode:186,top:3,left:11,},
        {shift:'"',keyName:'\'',keyCode:222,top:3,left:12,},
        {shift:null,keyName:'Enter',keyCode:13,top:3,left:13,width:2,code:'Enter'},

        {shift:null,keyName:'Shift',keyCode:16,top:4,left:0,width:2.5,code:'ShiftLeft'},
        {shift:'Z',keyName:'z',keyCode:90,top:4,left:2.5,},
        {shift:'X',keyName:'x',keyCode:88,top:4,left:3.5,},
        {shift:'C',keyName:'c',keyCode:67,top:4,left:4.5,},
        {shift:'V',keyName:'v',keyCode:86,top:4,left:5.5,},
        {shift:'B',keyName:'b',keyCode:66,top:4,left:6.5,},
        {shift:'N',keyName:'n',keyCode:78,top:4,left:7.5,},
        {shift:'M',keyName:'m',keyCode:77,top:4,left:8.5,},
        {shift:'<',keyName:',',keyCode:188,top:4,left:9.5,},
        {shift:'>',keyName:'.',keyCode:190,top:4,left:10.5,},
        {shift:'?',keyName:'/',keyCode:191,top:4,left:11.5,},
        {shift:null,keyName:'Shift',keyCode:16,top:4,left:12.5,width:2.5,code:'ShiftRight'},

        {shift:null,keyName:'Ctrl',keyCode:17,top:5,left:0,width:1.5,code:'ControlLeft'},
        {shift:null,keyName:'Win',keyCode:91,top:5,left:1.5,width:1.5},
        {shift:null,keyName:'Alt',keyCode:18,top:5,left:3,width:1.5,code:'AltLeft'},
        {shift:null,keyName:'Space',keyCode:32,top:5,left:4.5,width:4.5},
        {shift:null,keyName:'Alt',keyCode:18,top:5,left:9,width:1.5,code:'AltRight'},
        {shift:null,keyName:'Win',keyCode:92,top:5,left:10.5,width:1.5},
        {shift:null,keyName:'Menu',keyCode:93,top:5,left:12,width:1.5},
        {shift:null,keyName:'Ctrl',keyCode:17,top:5,left:13.5,width:1.5,code:'ControlRight'},

        {shift:'PrtScr',keyName:'SysRq',keyCode:0,top:0,left:15.5},
        {shift:null,keyName:'Scroll',keyCode:145,top:0,left:16.5},
        {shift:'Pause',keyName:'Break',keyCode:19,top:0,left:17.5},

        {shift:null,keyName:'Insert',keyCode:45,top:1,left:15.5},
        {shift:null,keyName:'Home',keyCode:36,top:1,left:16.5},
        {shift:'Page',keyName:'Up',keyCode:33,top:1,left:17.5},

        {shift:null,keyName:'Delete',keyCode:46,top:2,left:15.5},
        {shift:null,keyName:'End',keyCode:35,top:2,left:16.5},
        {shift:'Page',keyName:'Down',keyCode:34,top:2,left:17.5},

        {shift:null,keyName:'Up',keyCode:38,top:4,left:16.5},
        {shift:null,keyName:'Left',keyCode:37,top:5,left:15.5},
        {shift:null,keyName:'Down',keyCode:40,top:5,left:16.5},
        {shift:null,keyName:'Right',keyCode:39,top:5,left:17.5},

        {shift:'Num',keyName:'Lock',keyCode:144,top:1,left:19},
        {shift:'num/',keyName:'',keyCode:111,top:1,left:20},
        {shift:'num*',keyName:'',keyCode:106,top:1,left:21},
        {shift:'num-',keyName:'',keyCode:109,top:1,left:22},

        {shift:'num7',keyName:'Home',keyCode:103,top:2,left:19},
        {shift:'num8',keyName:'Up',keyCode:104,top:2,left:20},
        {shift:'num9',keyName:'PgUp',keyCode:105,top:2,left:21},
        {shift:'num+',keyName:'',keyCode:107,top:2,left:22,height:2},

        {shift:'num4',keyName:'Left',keyCode:100,top:3,left:19},
        {shift:'num5',keyName:'',keyCode:101,top:3,left:20},
        {shift:'num6',keyName:'Right',keyCode:102,top:3,left:21},

        {shift:'num1',keyName:'End',keyCode:97,top:4,left:19},
        {shift:'num2',keyName:'Down',keyCode:98,top:4,left:20},
        {shift:'num3',keyName:'PgDn',keyCode:99,top:4,left:21},
        {shift:'',keyName:'Enter',keyCode:13,top:4,left:22,height:2,code:'NumpadEnter'},

        {shift:'num0',keyName:'Ins',keyCode:96,top:5,left:19,width:2},
        {shift:'num.',keyName:'Del',keyCode:110,top:5,left:21},
      ].map((v,i,a)=>{
        v.isActive = false;
        return v
      })
    }
  })
  ,created(){
    let g = this;
    //已知给div绑定keyup事件是没有效果的。
    //直接注册在created周期中，然后驱动methods中注册的方法
    document.onkeydown = function(event){
      // let key = window.event.keyCode;
      if( ![116,123].includes(event.keyCode) ){
        event.preventDefault();
      }
      g.handleKeyDown(event)
    }
    g.keyboard.forEach(v => {
      v.style = {
        top:v.top && ( v.top * g.oneKeySize.size + 16 + 'px' ),
        left:v.left * g.oneKeySize.size + 'px',
        width:v.width?( 32 + (v.width - 1) * g.oneKeySize.size + 'px' ) : (32+'px'),
        height:v.height?( 32 + (v.height - 1) * g.oneKeySize.size + 'px' ) : (32+'px'),
      }
    });
  }
  ,methods:{
    handleKeyDown:function(event){
      let isDoubleKey = [13,16,17,18].includes(event.keyCode);
      this.keyboard.forEach((v,i,a)=>{
        if(isDoubleKey && v.code == event.code){
          v.isActive = true
        }
        if(!isDoubleKey && v.keyCode == event.keyCode){
          v.isActive = true
        }
        return v;
      })
    },
    resetKeyboard:function(){
      this.keyboard.forEach((v)=>{
        v.isActive = false;
      })
    }
  }
})
</script>
</body>
</html>